<template>
	<view class="ActivityModule" v-for="item in data">
		<!-- 报名 -->
		<view @click="aData(item.id,item.activityStatus)">
			<view class="ListCardsbox">
				<view class="imagebox">
					<image :src="item.photo" mode=""></image>
				</view>
				<view class="cabox">
					<text class="name">{{item.title}}</text>
					<view v-if="item.activityStatus===0" class="calist">
						<view class="stateEnr">活动报名中</view>
						<view class="me">
							<text>剩余</text>
							<text>{{item.quota}}</text>
							<text>个名额</text>
						</view>
					</view>
					<view v-else-if="item.activityStatus===1" class="calist">
						<view class="stateFor">活动进行中</view>
					</view>
					<view v-else="item.activityStatus===2" class="calist">
						<view class="stateEnd">活动已结束</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps,
	} from 'vue'
	const {
		data
	} = defineProps(['data'])
	const aData = (id, activityStatus) => {
		console.log(id, activityStatus);
		switch (activityStatus) {
			case 0:
				uni.navigateTo({
					url: `/pages/Activity/Activity-Registration?id=${id}`
				});
				break;
			case 1:
				uni.navigateTo({
					url: `/pages/Activity/Activity-InProgress?id=${id}`
				});
				break;
			case 2:
				uni.navigateTo({
					url: `/pages/Activity/Activity-Ended?id=${id}`
				});
				break;
		}
		// uni.navigateTo({
		// 	url: 'test?id=1&name=uniapp'
		// });
	}
</script>

<style lang="less" scoped>
	.ActivityModule {

		.ListCardsbox {
			width: 100%;
			height: 184rpx;
			margin: 44rpx 0;
			// background-color: #ccc;
			border-radius: 8rpx;
			box-shadow: 0 0 10rpx #F2F2F2;
			display: flex;

			.imagebox {
				width: 184rpx;
				height: 184rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 140rpx;
					height: 140rpx;
				}
			}

			.cabox {
				align-items: center;
				flex: 1;

				.name {
					display: inline-block;
					font-size: 28rpx;
					margin: 32rpx 0;
				}

				.calist {
					height: 76rpx;
					display: flex;
					font-size: 24rpx;
					justify-content: space-between;
					padding-right: 20rpx;
					font-weight: 700;

					.stateEnr {
						color: red;
					}

					.stateFor {
						color: rgb(47, 120, 255);
					}

					.stateEnd {
						color: rgb(153, 153, 153);
					}

					.me {
						color: #cccccc;

						text:nth-child(2) {
							color: red;
						}
					}
				}
			}
		}
	}
</style>
